<template>
  <div class="app-container">
    <div class="filter-box">
      <el-button type="primary" size="small" @click="handleAdd">新增版本</el-button>
    </div>
    <!-- 数据列表 -->
    <el-table v-loading="loading" :data="tableData" border style="width: 100%;">
      <el-table-column prop="version" label="当前版本" width="80px" align="center" />
      <el-table-column label="系统" width="80px" align="center">
        <template slot-scope="scope">
          <el-tag
            size="medium"
            :type="scope.row.os_type === 1 ? 'success' : 'danger'"
          >{{ scope.row.os_type === 1 ? '安卓' : 'ios' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="更新方式" width="100px" align="center">
        <template slot-scope="scope">
          <el-tag
            size="medium"
            :type="scope.row.update_type === 1 ? 'wargnin' : scope.row.update_type === 2 ? 'success' : 'error'"
          >{{ scope.row.update_type === 1 ? '提示升级' : scope.row.update_type === 2 ? '不提示升级' : '强制升级' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="update_url" label="更新URL" align="center" />
      <el-table-column prop="update_title" label="更新标题" align="center" />
      <el-table-column prop="update_content" label="更新内容" align="center" />
      <el-table-column prop="created_at" label="创建时间" align="center" />
      <el-table-column prop="updated_at" label="修改时间" align="center" />
      <el-table-column label="操作" width="180" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.pageSize"
      @pagination="getTableData"
    />

    <!-- 添加或修改菜单对话框 -->
    <el-dialog :title="type" :visible.sync="dialogFormVisible" width="1000px">
      <el-form ref="versionForm" :model="versionForm" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="安装包文件">
              <el-upload
                action="http://api.test.sanye666.top/admin/uploadApk"
                :headers="headers"
                :limit="1"
                :on-success="handleUploadSuccess"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="系统" prop="osType">
              <el-radio-group v-model="versionForm.osType">
                <el-radio :label="1">安卓</el-radio>
                <el-radio :label="2">ios</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="当前版本" prop="version">
              <el-input v-model="versionForm.version" placeholder="请输入当前版本" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="更新标题" prop="updateTitle">
              <el-input v-model="versionForm.updateTitle" placeholder="请输入更新标题" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="更新内容" prop="updateContent">
              <el-input
                v-model="versionForm.updateContent"
                placeholder="请输入更新内容"
                :autosize="{ minRows: 2, maxRows: 4 }"
                type="textarea"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="更新方式" prop="updateType">
              <el-radio-group v-model="versionForm.updateType">
                <el-radio :label="1">提示更新</el-radio>
                <el-radio :label="2">不提示更新</el-radio>
                <el-radio :label="3">强制更新</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { addVersion, delVersion, listVersion, updateVersion } from '@/api/system/version'
import Pagination from '@/components/Pagination'
import { getToken } from '@/utils/auth'
export default {
  components: { Pagination },
  data() {
    return {
      loading: false,
      tableData: [],
      dialogFormVisible: false,
      type: '',
      versionForm: {
        osType: 1,
        updateType: 1
      },
      // 表单校验
      rules: {
        updateTitle: [
          { required: true, message: '请输入更新标题', trigger: 'blur' }
        ],
        updateContent: [
          { required: true, message: '请输入更新内容', trigger: 'blur' }
        ],
        version: [
          { required: true, message: '请输入当前版本', trigger: 'blur' }
        ]
      },
      total: 0,
      listQuery: {
        page: 1,
        pageSize: 20
      }
    }
  },
  computed: {
    headers() {
      return {
        Authorization: 'Bearer ' + getToken()
      }
    }
  },
  created() {
    this.getTableData()
  },
  methods: {
    getTableData() {
      this.loading = true
      listVersion(this.listQuery).then(res => {
        this.tableData = res.data.list
        this.total = res.data.total
        this.loading = false
      }).catch(e => {
        this.loading = false
      })
    },
    resetForm() {
      this.versionForm = {
        osType: 1,
        updateType: 1,
        id: undefined,
        version: undefined,
        updateTitle: undefined,
        updateContent: undefined,
        updateUrl: undefined
      }
    },
    async handleAdd() {
      this.type = '新增版本'
      this.resetForm()
      this.dialogFormVisible = true
    },
    async handleEdit(index, row) {
      this.type = '修改版本'
      this.resetForm()
      console.log(row)
      const { id, os_type, update_content, update_title, update_type, update_url, version } = row
      this.versionForm = {
        id,
        osType: os_type,
        updateType: update_type,
        version,
        updateTitle: update_title,
        updateContent: update_content,
        updateUrl: update_url
      }
      this.dialogFormVisible = true
    },
    handleDelete(index, row) {
      this.$confirm('此操作将永久删除该版本, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delVersion(row.id).then(res => {
          this.getTableData()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch(e => {
          this.$message({
            type: 'error',
            message: '删除失败!'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 确认新增 || 修改
    handleConfirm() {
      this.$refs.versionForm.validate(valid => {
        if (valid) {
          if (!this.versionForm.updateUrl) {
            return this.$message.error('请先上传文件!')
          }
          const { id, ...data } = this.versionForm
          if (this.type === '新增版本') {
            addVersion(data).then(res => {
              this.$message({
                type: 'success',
                message: '新增成功!'
              })
              this.getTableData()
              this.dialogFormVisible = false
            }).catch(e => {
              this.$message({
                type: 'error',
                message: '新增失败!'
              })
              this.dialogFormVisible = false
            })
          } else {
            updateVersion(id, data).then(res => {
              this.$message({
                type: 'success',
                message: '新增成功!'
              })
              this.getTableData()
              this.dialogFormVisible = false
            }).catch(e => {
              this.$message({
                type: 'error',
                message: '新增失败!'
              })
              this.dialogFormVisible = false
            })
          }
        }
      })
    },
    // 文件上传成功
    handleUploadSuccess(res, file, fileList) {
      this.versionForm.updateUrl = res.data.url
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  padding: 20px;
  .filter-box {
    margin-bottom: 20px;
    .filter-item {
      font-size: 14px;
      span {
        margin-right: 10px;
      }
    }
  }
}
</style>
